<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTE

<meta charset="utf-8">
<link rel="stylesheet" href="../../assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../../assets/css/datepicker.css" />
<link rel="stylesheet" href="../../assets/css/ui.jqgrid.css" />

<style>
.input-answer {
	color: black;
}

.title2 {
	font-size: 20px;
}

.title3 {
	font-size: 20px;
	cursor: pointer;
	color: red;
}

.btnPlay {
	width: 30px;
	height: 30px;
	cursor: pointer;
	margin: 2px;
}
</style>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>Audio Detail</h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<div class="col-xs-12">
		
			<div id="articleInfo" class="title2"></div>
			<div
				style="position: fixed; background: #2A3758; margin-left: auto; margin-right: auto; z-index: 10000; top: 0px;">
				<audio controls id="currAudio" style="height: 50px;">
					<source id="audioSource" src="">
					<p>Your user agent does not support the HTML5 Audio element.</p>
				</audio>
				<div style="margin: 5px">
					<button class="btn btn-info" type="button" onclick="back()">back3s</button>
					&nbsp;
					<button class="btn btn-info" type="button" onclick="forward()">forward3s</button>
				</div>
			</div>
			<div id="mySenList" style="font-size: 20px;"></div>
			
		</div>



		<table id="grid-table"></table>

		<div id="grid-pager"></div>

		<script type="text/javascript">
			var $path_base = "../..";//in Ace demo this will be used for editurl parameter
		</script>

		<div id="templateSeg" style="display: none">
			<div style="border: 3px dashed #ccc; margin-top: 5px;">
				<table class="table table-striped table-bordered table-hover">
					<tbody>
						<tr>
							<td colspan="2">
								<span name="snippetIdSpan" style="display: none;">${snippetId}</span> 
								<span name="numSpan"></span> <img onclick="playSeg(this)"
								class="btnPlay" src="../../assets/images/play.JPG"> Range:
								<span name="fromSpan">${fromNum}</span>-<span name="toSpan">${toNum}</span>
								<button onclick="splitAudio(this)" type="button"
									class="btn btn-info">split</button>
							</td>
						</tr>
						<tr>
							<td colspan=2>
								<audio controls  preload="none" style="height: 50px;">
									<source src="../../audiofiles/realAudio/${audioSnippetUrl}">
								    <p>Your user agent does not support the HTML5 Audio element.</p>
								</audio>							
							</td>
						</tr>
						<tr>
							<td colspan="2"><textarea
									class="autosize-transition form-control" name="myAnswer"
									name="ta_6"
									style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 69px;"></textarea></td>
						</tr>
						<tr>
							<td colspan="2">
								<button onclick="submitAnswer(this)" type="button"
									class="btn btn-info">submit</button>
								<button onclick="getAllAnswer(this)" type="button"
									class="btn btn-info">all answers</button>
								<div name="allAnswerDiv"></div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>


		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->

<!-- page specific plugin scripts "http://res.wx.qq.com/open/js/jweixin-1.0.0.js", -->
<script type="text/javascript">
	var scripts = [null,"../../assets/js/date-time/bootstrap-datepicker.min.js","../../assets/js/jquery.lettering.js", "../../assets/js/jquery.autosize.min.js", 
	                null]
	var currPage = 1;
	var rowSize = 99999;
	var currMaxRowIndex = 1;
	var allLoadDone = false;
	var audioId;
	var timer ;
	ace.load_ajax_scripts(scripts, function() {
	  //inline scripts related to this page
		jQuery(function($) { 
			audioId = GetArgsFromHref(window.location.href, "audioId");
			audioId = audioId.replace("#page/audioSnippets", "");
			$("#articleInfo").html("Audio ID: " + audioId);
			
			var currAudio = document.getElementById("currAudio");
			
			//$("#audioSource").attr("src", "../../audiofiles/test.mp3").detach().appendTo("#currAudio");
			
			//initWeiXinInfo();
			
			initWork();
			
		
			
			$
			.ajax({
				type : "POST",
				url : "../../getAudio",
				data : {
					audioId : audioId
				},
				async : true,
				dataType : "json",
				success : function(data) {
					var oneArticleHtml = "";
					oneArticleHtml += "<table   class='table table-striped table-bordered table-hover'>";
					var name = data.name;
					var url = data.url;
					var remark = data.remark;
					oneArticleHtml += "<tr>";
					oneArticleHtml += "	  <td colspan=2>Audio";
					oneArticleHtml += " ID:" + data.id;
					oneArticleHtml += "	  </td>";
					oneArticleHtml += "</tr>";
					if(name != "") {
						oneArticleHtml += "<tr>";
						oneArticleHtml += "	  <td>Name</td>";
						oneArticleHtml += "	  <td>";
						oneArticleHtml += 		name;
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "</tr>";
					}
					if(remark != "") {
						oneArticleHtml += "<tr>";
						oneArticleHtml += "	  <td>Remark</td>";
						oneArticleHtml += "	  <td>";
						oneArticleHtml += 		remark;
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "<tr>";
					}
					oneArticleHtml += "	  <td>Show Answer Only When Reply</td>";
					oneArticleHtml += "	  <td>";
					oneArticleHtml += 		data.showAnswerOnlyWhenReply;
					oneArticleHtml += "	  </td>";
					oneArticleHtml += "</tr>";
					oneArticleHtml += "</table>";
					$("#articleInfo").html(oneArticleHtml);
					
					currAudio.src = "../../audiofiles/realAudio/" + url;
				},
				error : function(data) {
					alert("submit result error, please contact administrator");
				}

			});
			
			return;
			
			
			var bookMark = getBookMark(); 
			currPage = parseInt((parseInt(bookMark) - 1  + 10) / 10);
			currMaxRowIndex = (currPage - 1) * 10 + 1;
			if(currMaxRowIndex < 0) {
				currMaxRowIndex = 1;
			}
			if(currPage < 1) {
				currPage = 1;
			}
			if(currPage != 1) {
				bootbox.confirm("是否直接跳到上次书签(" + bookMark + ")所在的组位置？", function(result) {
					if(result) {
						initWork();
					} else {
						currPage = 1;
						currMaxRowIndex = 1;
						initWork();
					}
				});
			} else {
				initWork();
			}
			
		});
	});
	

	
	function initWeiXinInfo() {
		return;
		
		var shareUrl = encodeURIComponent(location.href).split('#')[0];
		
		console.log("shareUrl:" + shareUrl);
		$.ajax({
			type : "POST",
			url : "../../getWXShareInfo",
			data : {
				shareUrl : shareUrl
			},
			async : true,
			dataType : "json",
			success : function(data) {
				//appId, timestamp, nonceStr, signature
				wx.config({
				    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: data[0], // 必填，公众号的唯一标识
				    timestamp: data[1], // 必填，生成签名的时间戳
				    nonceStr: data[2], // 必填，生成签名的随机串
				    signature: data[3],// 必填，签名，见附录1
				    jsApiList: ["onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				
				
				wx.ready(function () {
					console.log("###ready");
					wx.onMenuShareTimeline({
					    title: '英文素材分享', // 分享标题
					    link: shareUrl, // 分享链接
					    imgUrl: '', // 分享图标
					    success: function () { 
					        // 用户确认分享后执行的回调函数
					        alert("success");
					    },
					    cancel: function () { 
					        // 用户取消分享后执行的回调函数
					        alert("cancel");
					    }
					});
					
				});
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	var loading = false;
	function initWork() {
		refreshSenList();
		
		$(document).scrollTop(0);
		$(window).scroll(function(){
			  //console.log("$(document).scrollTop():" + $(document).scrollTop() + " $(document).height():" + $(document).height()
			//		   + " $(window).height():" + $(window).height());
			if(allLoadDone) {
				return;
			}
	        if($(document).scrollTop() >= $(document).height() - $(window).height()){
	        	if(!loading) {
		        	$("#loading").show();
		        	refreshSenList();
		        	$("#loading").hide();
	        	}
	        }
	      });	
	}
	
	
	function refreshSenList() {
		loading = true;
		if(audioId == "") {
			return;
		} else {
			
		
		}
		
		console.log("refreshSenList audioId:" + audioId);
		currMaxRowIndex = 1;
		$("#mySenList").html("");
		$
				.ajax({
					type : "POST",
					url : "../../getSnippetList",
					data : {
						page : currPage,
						rows : rowSize,
						audioId : audioId
					},
					async : false,
					dataType : "json",
					success : function(data) {
						if(currPage >= data.total) {
							$("#loadMoreBtn").attr("disabled", true);							
							$("#loadMoreBtn").hide();
							allLoadDone = true;
						} else {
							currPage++;
						}
						console.log("data.length:" + data.rows.length);
						for (var i = 0; i < data.rows.length; i++) {
							/*
							var oneArticleHtml = "<div  style='border: 3px dashed #ccc;margin-top:5px;'   >";
							oneArticleHtml += "<table   class='table table-striped table-bordered table-hover'>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>";
							oneArticleHtml += 		 (currMaxRowIndex++) + "/" + data.records  ;
							oneArticleHtml += "   	  <img src='../../assets/images/play.JPG' class='btnPlay'  onclick='playSeg(this, " + data.rows[i].start + "," + data.rows[i].end + ")'>";
							oneArticleHtml +=        " Range: <span>" + (data.rows[i].start) + "</span>-<span>" + (data.rows[i].end) + "</span>";
							oneArticleHtml += '       <button class="btn btn-info" type="button" onclick="splitAudio(this, ' + data.rows[i].id + ', ' + i + ')">split</button>'; 
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							if(data.rows[i].url != null && data.rows[i].url != "") {
								oneArticleHtml += "<tr>";
								oneArticleHtml += "	  <td colspan=2>"
								oneArticleHtml += ' 		<audio controls  preload="none" style="height: 50px;">';
								oneArticleHtml += ' 			<source src="' + "../../audiofiles/realAudio/" + data.rows[i].url + '">';
								oneArticleHtml += '				 <p>Your user agent does not support the HTML5 Audio element.</p>';
								oneArticleHtml += '			</audio>';							
								oneArticleHtml += "	  </td>" ;
								oneArticleHtml += "</tr>";
							}
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>" + '<textarea name="ta_' + data.rows[i].id + '" id="myAnswer_' + i + '"  class="autosize-transition form-control"></textarea>' + "</td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>"; 
							oneArticleHtml += '       <button class="btn btn-info" type="button" onclick="submitAnswer(this, ' + data.rows[i].id + ', ' + i + ')">submit</button>'; 
							oneArticleHtml += '       <button class="btn btn-info" type="button" onclick="getAllAnswer(this, ' + data.rows[i].id + ', ' + i + ')">all answers</button>'; 
							oneArticleHtml += "   	  <div id='allAnswerDiv_" + i + "'></div>";
							oneArticleHtml += "   </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "</table>";
							oneArticleHtml += "</div>";
							*/
							
							var oneArticleHtml = $("#templateSeg").html(); 
							oneArticleHtml = oneArticleHtml.replace("${snippetId}", data.rows[i].id);
							oneArticleHtml = oneArticleHtml.replace("${fromNum}", data.rows[i].start);
							oneArticleHtml = oneArticleHtml.replace("${toNum}", data.rows[i].end);
							oneArticleHtml = oneArticleHtml.replace("${audioSnippetUrl}", data.rows[i].url);
							
							//alert("oneArticleHtml:" + oneArticleHtml);
							$("#mySenList").append(oneArticleHtml);
						}		
						
						
						
						
						$(".word_split").lettering('words');
						$('.word_split').click(function(event) {
							var word=event.target.innerHTML;
							//alert("word:" + word);
							fetchWordInfo(word);
						});
						
						loading = false;
						
						$('textarea[class*=autosize]').autosize({append: "\n"});
						
						initMyAnswer(); //TODO
						
					},
					error : function(data) {
						alert("submit result error, please contact administrator");
					}

				});
	}
	
	function initMyAnswer() {
		var tas = document.getElementsByTagName("textarea");
		console.log("tas length:" + tas.length);
		
		for(var i = 0; i < tas.length; i++) {
			var oneTextArea = $(tas[i]);
			var oneTAName = $(oneTextArea).attr("name");
			console.log("oneTAName:" + oneTAName);
			
			var currSenDiv = $(oneTextArea).parent().parent().parent().parent().parent();
			//console.log("tagName:" + currSenDiv.get(0).tagName);
			
			var  snippetId = currSenDiv.find("span[name='snippetIdSpan']").html();
			
			if(snippetId == null || snippetId == "" || snippetId == "${snippetId}") {
				continue;
			}
			
			//var snippetId = oneTAName.replace("ta_", "");
			console.log("snippetId:" + snippetId);
			$.ajax({
				type : "POST",
				url : "../../getMyAnswer",
				data : {
					snippetId : snippetId
				},
				async : false,
				dataType : "text",
				success : function(data) {
					console.log("getMyAnswer data:" + data)
					oneTextArea.val(data);
				},
				error : function(data) {
					alert("set error, please contact administrator");
				}

			});
		}
		
	}
	
	function back() {
		currAudio.currentTime -= 3;
	}
	
	function forward() {
		currAudio.currentTime += 3;
	}
	
	function splitAudio0(obj, snippetId) {
		var bakScrollTop = $(document).scrollTop();
		var currTime = parseInt(currAudio.currentTime); 
		var from = parseInt($(obj).prev().prev().html());
		var to = parseInt($(obj).prev().html());
		console.log("from:" + from + " to:" +  to);
		console.log("splitAudio obj:" + obj + "  snippetId:" +  snippetId + " currAudio.currentTime:" + currTime + " bakScrollTop:" + bakScrollTop);
		
		if(currTime <= from || currTime >= to) {
			alert("can not split, since current time " + currTime + " is not between " + from + "-" + to);
			return;
		}
		
		//var answerInfo = $("#myAnswer_" + index).val();
		$.ajax({
			type : "POST",
			url : "../../splitAudio",
			data : {
				snippetId : snippetId,
				from : from,
				to : to,
				newTo : currTime
			},
			async : true,
			dataType : "text",
			success : function(data) {
				var  newSplitSnippetId = data;
				//alert("data:" + data);
				//refreshSenList();
				$(document).scrollTop(bakScrollTop);
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function splitAudio(obj) {
		currAudio.pause();
		
		var currSenDiv = $(obj).parent().parent().parent().parent().parent();
		console.log("tagName:" + currSenDiv.get(0).tagName);
		
		var  snippetId = $(obj).parent().find("span[name='snippetIdSpan']").html();
		var  currSenAudio = currSenDiv.find("audio");
		var  currSenAudioSource = currSenDiv.find("source");
		console.log("currSenAudio:" + currSenAudio);
		var bakScrollTop = $(document).scrollTop();
		var currTime = parseInt(currAudio.currentTime); 
		var from = parseInt($(obj).prev().prev().html());
		var to = parseInt($(obj).prev().html());
		console.log("from:" + from + " to:" +  to + " snippetId:" + snippetId);
		console.log("splitAudio obj:" + obj + "  snippetId:" +  snippetId + " currAudio.currentTime:" + currTime + " bakScrollTop:" + bakScrollTop);
		
		if(currTime <= from || currTime >= to) {
			alert("can not split, since current time " + currTime + " is not between " + from + "-" + to);
			return;
		}
		
		//var answerInfo = $("#myAnswer_" + index).val();
		$.ajax({
			type : "POST",
			url : "../../splitAudio",
			data : {
				snippetId : snippetId,
				from : from,
				to : to,
				newTo : currTime
			},
			async : true,
			dataType : "json",
			success : function(data) {
				var  newSplitSnippetId = data[0];
				//alert("data:" + data);
				//refreshSenList();
				//$(document).scrollTop(bakScrollTop);
				
				var oneArticleHtml = $("#templateSeg").html(); 
				oneArticleHtml = oneArticleHtml.replace("${snippetId}", newSplitSnippetId);
				oneArticleHtml = oneArticleHtml.replace("${fromNum}", currTime);
				oneArticleHtml = oneArticleHtml.replace("${toNum}", to);
				oneArticleHtml = oneArticleHtml.replace("${audioSnippetUrl}", data[1]);
				$(oneArticleHtml).insertAfter(currSenDiv);
				
				parseInt($(obj).prev().html(currTime));
				
				currSenAudioSource.attr("src", "../../audiofiles/realAudio/" + data[2]).detach().appendTo(currSenAudio);
				currSenAudio.load();
				
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	
	function submitAnswer0(obj, snippetId, index) {
		console.log("submitAnswer obj:" + obj + "  snippetId:" +  snippetId);
		var answerInfo = $("#myAnswer_" + index).val();
		$.ajax({
			type : "POST",
			url : "../../submitAnswer",
			data : {
				answerInfo : answerInfo,
				snippetId : snippetId
			},
			async : true,
			dataType : "text",
			success : function(data) {
				alert("data:" + data);
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function submitAnswer(obj) {
		$(obj).html("submit");
		//var start = $(btn).parent().children("span[name='fromSpan']").html();
		//, snippetId, index
		var  snippetId = $(obj).parent().parent().parent().find("span[name='snippetIdSpan']").html();
		var answerInfo = $(obj).parent().parent().parent().find("textarea[name='myAnswer']").val();
		console.log("submitAnswer obj:" + obj + "  snippetId:" +  snippetId + " answerInfo:" + answerInfo);
		$.ajax({
			type : "POST",
			url : "../../submitAnswer",
			data : {
				answerInfo : answerInfo,
				snippetId : snippetId
			},
			async : true,
			dataType : "text",
			success : function(data) {
				//alert("data:" + data);
				$(obj).html("<i class='ace-icon fa fa-check bigger-110'></i>submit");
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function getAllAnswer0(obj, snippetId, index) {
		console.log("getAllAnswer obj:" + obj + "  snippetId:" +  snippetId + " scrollTop:" + $(document).scrollTop());
		$("#allAnswerDiv_" + index).hide();		
		
		$.ajax({
			type : "POST",
			url : "../../getAllAnswer",
			data : {
				snippetId : snippetId
			},
			async : true,
			dataType : "json",
			success : function(data) {
				//alert("data:" + data);
				var infoHtml = "";
				for(var i = 0; i < data.length; i++) {
					infoHtml += "<div>";
					infoHtml += (i + 1) + ": " + data[i].content + " (by " +  data[i].author.email + ")";
					infoHtml += "</div>";
				}
				if(data.length == 0) {
					infoHtml = "no data yet";
				}
				$("#allAnswerDiv_" + index).html(infoHtml);
				$("#allAnswerDiv_" + index).show();
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function getAllAnswer(obj) {
		//var , snippetId, index
		var  snippetId = $(obj).parent().parent().parent().find("span[name='snippetIdSpan']").html();
		var  allAnswerDiv = $(obj).parent().parent().parent().find("div[name='allAnswerDiv']");
		console.log("getAllAnswer obj:" + obj + "  snippetId:" +  snippetId + " scrollTop:" + $(document).scrollTop());
		$(allAnswerDiv).hide();		
		
		$.ajax({
			type : "POST",
			url : "../../getAllAnswer",
			data : {
				snippetId : snippetId
			},
			async : true,
			dataType : "json",
			success : function(data) {
				//alert("data:" + data);
				var infoHtml = "";
				for(var i = 0; i < data.length; i++) {
					infoHtml += "<div>";
					infoHtml += (i + 1) + ": " + data[i].content + " (by " +  data[i].author.email + ")";
					infoHtml += "</div>";
				}
				if(data.length == 0) {
					infoHtml = "no data yet";
				}
				$(allAnswerDiv).html(infoHtml);
				$(allAnswerDiv).show();
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function fetchWordInfo(wordValue) {
		$.ajax({
			type : "POST",
			url : "../../getWordList2ForSingle",
			data : {
				audioId : audioId,
				wordValue : wordValue
			},
			async : true,
			dataType : "json",
			success : function(data) {
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
				var i = 0;
				var oneWordHtml = "";
				oneWordHtml += "<table   class='table table-striped table-bordered table-hover'>";
				oneWordHtml += "<tr>";
				oneWordHtml += "	  <td colspan=2>" + data.rows[i].value + "</td>";
				oneWordHtml += "</tr>";
				oneWordHtml += "<tr>";
				oneWordHtml += "	  <td colspan=2>";
				oneWordHtml += "	    " + data.rows[i].pron + " " + data.rows[i].explain2;
				oneWordHtml += "	  </td>";
				oneWordHtml += "</tr>";
				/*
				oneWordHtml += "<tr>";
				oneWordHtml += "	  <td colspan=2>";
				oneWordHtml += "	    出现频次: " + data.rows[i].tempHit;
				
				for(var j = 0; j < data.rows[i].tempRank; j++) {
					oneWordHtml += "<img width='20' height='20' src='../../assets/images/star_full.png' />";
				}
				
				oneWordHtml += "	  </td>";
				oneWordHtml += "</tr>";
				*/
				oneWordHtml += "<tr>";
				oneWordHtml += "	  <td colspan=2>";
				oneWordHtml += "     <b>收藏 &rarr;</b>  <span class='title3'  onclick='toggleForkWord(this, " + data.rows[i].id + ")' >";
				if(data.rows[i].tempInterest != '1') {
					oneWordHtml += "      <i class='ace-icon glyphicon glyphicon-star-empty'></i>";
				} else {
					oneWordHtml += "      <i class='ace-icon glyphicon glyphicon-star'></i>";
				}
				oneWordHtml += "      </span>";
				oneWordHtml += "	  </td>";
				oneWordHtml += "</tr>";
				oneWordHtml += "</table>";
				$("#wordDiv").html(oneWordHtml);
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function toggleArticleStatus(cbObj) {
		console.log("cbObj.checked:" + cbObj.checked);
		$.ajax({
			type : "POST",
			url : "../../updateArticleStatus",
			data : {
				audioId : audioId,
				status : cbObj.checked
			},
			async : true,
			dataType : "json",
			success : function(data) {
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
	
	function setBookMark(bookMarkIndex) {
		$.ajax({
			type : "POST",
			url : "../../setBookMark",
			data : {
				audioId : audioId,
				bookMarkIndex : bookMarkIndex,
				type : 'sen'
			},
			async : true,
			dataType : "text",
			success : function(data) {
				
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	
	function getBookMark() {
		var bookMarkIndex = 0;
		$.ajax({
			type : "POST",
			url : "../../getBookMark",
			data : {
				audioId : audioId,
				type : 'sen'
			},
			async : false,
			dataType : "text",
			success : function(data) {
				bookMarkIndex = data;
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}
		});
		return bookMarkIndex;
	}
	

	var lastPlayBtn = null;
	function playSeg0(btn, start, end) {
		$('.textareaText').css("border", "none");
		if(lastPlayBtn != null && lastPlayBtn != btn) {
//			$(".btnPlay").attr("src", "images/play.JPG");
			$(lastPlayBtn).attr("src", "../../assets/images/play.JPG");
		}
		//var currBtnSrc = $(btn).attr("src");
		//$(btn).attr("src", currBtnSrc);
		clearInterval(timer);
		currAudio.pause();

//		alert("here1");
		// alert("start:" + start + " end:" + end + " currentTime:" +
		// currAudio.currentTime);

		if ($(btn).attr("src") == "../../assets/images/play.JPG") {
//			console.log("here22");
			//alert("here2");
			setTimeout(function () { 
		        $(btn).attr("src", "../../assets/images/pause.jpg");
		    }, 100);
			currAudio.currentTime = start;
			currAudio.play();
			
			$(btn).parent().prev().children(0).css("border", "double 6px orange");
			
			timer = setInterval(function() {
				if (currAudio.currentTime > end) {
					currAudio.pause();
					$(btn).attr("src", "../../assets/images/play.JPG");
					clearInterval(timer);
				} else {
//					$(btn).attr("src", "images/pause.jpg");
				}
			}, 1000);
		} else {
//			console.log("here3");
			//alert("here3");
			$(btn).attr("src", "../../assets/images/play.JPG");
			currAudio.pause();
		}

		lastPlayBtn = btn;
	}
	
	function playSeg(btn) {
		
		var start = $(btn).parent().children("span[name='fromSpan']").html();
		var end = $(btn).parent().children("span[name='toSpan']").html();
		console.log("start:" + start + " end:" +　end);
		$('.textareaText').css("border", "none");
		if(lastPlayBtn != null && lastPlayBtn != btn) {
//			$(".btnPlay").attr("src", "images/play.JPG");
			$(lastPlayBtn).attr("src", "../../assets/images/play.JPG");
		}
		//var currBtnSrc = $(btn).attr("src");
		//$(btn).attr("src", currBtnSrc);
		clearInterval(timer);
		currAudio.pause();

//		alert("here1");
		// alert("start:" + start + " end:" + end + " currentTime:" +
		// currAudio.currentTime);

		if ($(btn).attr("src") == "../../assets/images/play.JPG") {
//			console.log("here22");
			//alert("here2");
			setTimeout(function () { 
		        $(btn).attr("src", "../../assets/images/pause.jpg");
		    }, 100);
			currAudio.currentTime = start;
			currAudio.play();
			
			$(btn).parent().prev().children(0).css("border", "double 6px orange");
			
			timer = setInterval(function() {
				if (currAudio.currentTime > end) {
					currAudio.pause();
					$(btn).attr("src", "../../assets/images/play.JPG");
					clearInterval(timer);
				} else {
//					$(btn).attr("src", "images/pause.jpg");
				}
			}, 1000);
		} else {
//			console.log("here3");
			//alert("here3");
			$(btn).attr("src", "../../assets/images/play.JPG");
			currAudio.pause();
		}

		lastPlayBtn = btn;
	}
</script>
